import React, { useState } from "react";
import { LockOutlined, PhoneOutlined } from "@ant-design/icons";
import { Button, Form, Input, Flex, Typography, message } from "antd";
import "./index.css";
import { validatePassword } from "./validate";
import { useCountdown } from "../../hooks/useCountdown";
import { useDispatch } from "react-redux";
import { setUserInfo, clearUserInfo } from "../../stores/modules/user";

const { Title } = Typography;

export const ForgotComponent = (props) => {
  const dispatch = useDispatch();
  // 表单校验
  const [form] = Form.useForm();
  const [submittable, setSubmittable] = useState(false); // 表单是否可提交
  const onValuesChange = (_, allValues) => {
    const allFieldsFilled = Object.values(allValues).every((value) => {
      if (typeof value === "string") {
        return value.trim() !== "";
      }
      return Boolean(value);
    });
    setSubmittable(allFieldsFilled);
  };

  // 提交表单
  const onFinish = (values) => {
    const user = JSON.parse(localStorage.getItem("user"));
    if (user.phone === values.phone) {
      dispatch(clearUserInfo());
      const newUser = { username: user.username, ...values };
      console.log(newUser);
      dispatch(setUserInfo(newUser));
      props.handleLogin();
    } else {
      message.error("手机号错误");
    }
  };
  const { state, startCountdown } = useCountdown({
    seconds: 30,
    onFinish: () => {
      console.log("倒计时结束");
    },
  });
  // 获取验证码
  const handleGetCaptcha = () => {
    if (!form.getFieldValue("phone")) {
      message.warning("请输入手机号");
      return;
    }
    startCountdown();
  };

  return (
    <div className="login_container">
      <Form
        form={form}
        name="forgot"
        autoComplete="false"
        validateTrigger="onSubmit"
        className="login-form"
        onFinish={onFinish}
        onValuesChange={onValuesChange}
      >
        <Title level={2} className="login-title">
          找回密码
        </Title>

        <Form.Item
          name="phone"
          rules={[
            {
              required: true,
              message: "请输入手机号!",
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "请输入有效的手机号!",
            },
          ]}
        >
          <Input prefix={<PhoneOutlined />} placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item
          name="password"
          validateTrigger="onSubmit"
          rules={[
            {
              validator: validatePassword,
            },
          ]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            type="password"
            placeholder="请输入新密码"
          />
        </Form.Item>

        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: "请输入验证码!",
            },
            {
              pattern: /^\d{6}$/,
              message: "请输入6位数字验证码!",
            },
          ]}
        >
          <Flex align="center" gap={8}>
            <Input placeholder="请输入验证码" />
            <Button
              type="primary"
              onClick={handleGetCaptcha}
              disabled={state !== "获取验证码" && state !== "重新获取"}
            >
              {state}
            </Button>
          </Flex>
        </Form.Item>

        <Form.Item>
          <Button
            block
            className="login-button"
            type={submittable ? "primary" : "default"}
            htmlType="submit"
            disabled={!submittable}
          >
            确定
          </Button>
        </Form.Item>
        <Form.Item>
          <Flex justify="space-between" align="center">
            <a onClick={props.handleLogin}>立即登录</a>
            <div style={{ textAlign: "center" }}>
              没有账号?
              <a onClick={props.handleRegister}>快速注册</a>
            </div>
          </Flex>
        </Form.Item>
      </Form>
    </div>
  );
};
